<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          @change="getData()"
          clearable
          placeholder="地址查询"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="客户名称"
          @keyup.enter.native="getData()"
          clearable
          v-model="params.customer_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="负责人"
          @keyup.enter.native="getData()"
          clearable
          v-model="params.corp_name"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="getData()">查询</el-button>
        <el-button icon="el-icon-plus" @click="handleEdit()">新增</el-button>
      </el-form-item>
      <el-form-item class="float-right">
        <el-button icon="el-icon-upload2" @click="showDialogImport">导入</el-button>
        <el-button
          icon="el-icon-download"
          :loading="exportLoading"
          @click="exportExcel('客户（自然人）')"
        >
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <c-table border v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:business="scope">
        <div class="text-truncate" :title="scope.row.main_business">
          {{ scope.row.main_business }}
        </div>
      </template>
      <template v-slot:scope="scope">
        <div class="text-truncate" :title="scope.row.business_scope">
          {{ scope.row.business_scope }}
        </div>
      </template>
    </c-table>

    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <import-excel
      :visible.sync="dialogImportVisible"
      excel-template="/static/files/客户信息导入模板(个人).xlsx"
      title="导入客户信息"
      :post-api="postUrl"
      @success="getData(params.index)"
    ></import-excel>

    <new-customer
      :visible.sync="editVisible"
      :table-id="tableId"
      orgType="2"
      @success="getData(params.index)"
      :form-data="formData"
    ></new-customer>
    <customer-detail :visible.sync="detailVisible" :customer-data="customerData"></customer-detail>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryTrouble } from '@vimi/utils-api'
import { projectShowJobs } from '@/credit/plugins/constant'
import { enumshowMarrType } from '@/credit/plugins/enum'
import { exportExcel } from '@/credit/mixin/taskTableProvinceUnion'

import SelectAddress from '@/components/select/SelectAddress'
import NewCustomer from '@/credit/views/city/customer/NewCustomer'
import ImportExcel from '@/components/ImportExcel'
import CustomerDetail from '@/credit/views/city/customer/CustomerDetail'

export default {
  components: {
    CustomerDetail,
    SelectAddress,
    NewCustomer,
    ImportExcel,
  },
  data() {
    return {
      order: {
        create_time: 'desc',
      },
      params: {
        index: 1,
        size: 15,
        'submit_type.eq': 2,
        'customer_type.eq': 2,
      },
      loading: false,
      tableColumns: [
        { attrs: { label: '客户名称', prop: 'customer_name', minWidth: '110px' } },
        { attrs: { label: '地址', prop: 'family_address', minWidth: '110px' } },
        { attrs: { label: '联系电话', prop: 'mobile_no', minWidth: '100px' } },
        { attrs: { label: '婚姻状况', prop: 'marriageLabel', align: 'center' } },
        { attrs: { label: '主营产业', prop: 'main_business' }, slot: 'business' },
        { attrs: { label: '经营范围', prop: 'business_scope', minWidth: '120px' }, slot: 'scope' },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            { content: '编辑', icon: 'fa fa-edit', event: this.handleEdit },
            { content: '查看', icon: 'fa fa-search', event: this.handleView },
          ],
        },
      ],
      tableName: 'datum_customer_info_warehouse',
      tableData: [],
      tableCount: 0,
      tableId: '',
      formData: {},
      editVisible: false,
      dialogImportVisible: false,
      postUrl: '',
      exportLoading: false,
      detailVisible: false,
      customerData: {},
    }
  },

  computed: {
    ...mapGetters(['clientId', 'job', 'userId']),
    isShowAllJob() {
      return projectShowJobs.includes(this.job)
    },
  },

  created() {
    this.params['service_id.eq'] = this.clientId

    if (!this.isShowAllJob) {
      this.params.res_a_b = this.userId
    }

    this.postUrl =
      '/api/credit/import/' +
      queryTrouble(this.tableName, {
        importKey: `customer_info_warehouse_template_person`,
        'service_id.eq': this.clientId,
        'submit_type.eq': 2,
      })
    this.getData()
  },
  methods: {
    showDialogImport() {
      this.dialogImportVisible = true
    },
    handleView(row) {
      this.detailVisible = true
      this.customerData = row
    },
    handleEdit(row) {
      this.formData = row ? { ...row } : {}
      this.tableId = row ? row.datum_customer_info_warehouse_id : ''
      this.editVisible = true
    },
    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },
    dataAdapter(item) {
      item.marriageLabel = enumshowMarrType[item.marriage_status]
      return item
    },
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order)
      )
    },
    async exportExcel(filename) {
      this.exportLoading = true
      exportExcel({
        filename,
        tableColumns: this.tableColumns,
        params: this.params,
        dataAdapter: this.dataAdapter,
        fetchData: this.fetchData,
        onLoaded: () => {
          this.exportLoading = false
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
